<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Carousel Component Example - Resize Example (Search, Reload, Resize) </title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/utilities/utilities.js&2.6.0/build/container/container_core-min.js"></script> 
	<script type="text/javascript" src="scripts/carousel.js"></script>

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css">
	<link href="css/carousel.css" rel="stylesheet" type="text/css">
	<link href="css/yui.css" rel="stylesheet" type="text/css">
<!-- 
	Inlined styles for my overrides to the carousel for this demo.
	Normally I would put this in a separate CSS file.
-->
<style type="text/css">

.carousel-component { 
	padding:8px 8px 4px 8px;
	margin:0px;
	width:77px; /* seems to be needed for safari */
}

.carousel-component .carousel-list li { 
	margin:0px;	
	width:77px; /* img width is 75 px from flickr + border-top (1) + border-bottom(1) */
}

/* Applies only to vertical carousels */
.carousel-component .carousel-vertical li { 
	margin-bottom:4px;
	height:89px; /* image + row of text (87) + border-top (1) + border-bottom(1) */
}

.carousel-component .carousel-list li a { 
	display:block;
	border:1px solid #e2edfa;
	outline:none;
}

.carousel-component .carousel-list li a:hover { 
	border: 1px solid #aaaaaa;
}

.carousel-component .carousel-list li img { 
	display:block; 
}
									
#up-arrow { 
	cursor:pointer; 
	margin-left:32px;
	margin-top:20px;
}

#down-arrow { 
	cursor:pointer; 
	margin-left:32px; /* just ([width+margins]95/2)-([arrow width]26/2)  45-13=32 */
	margin-top:5px;
}

div.input-line {
	padding-top:10px;
}

div.input-line p {
	float:left;
	padding:5px 4px 0px 0px;
	margin:0px;
}
div.input-line input {
	float:left;
	margin-top:1px;
	margin-right:8px;
}
div.input-line button {
	float:left;
}

</style>
<script type="text/javascript">

/**
 * Custom inital load handler. Called when the carousel loads the initial
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadInitHandler
 */
var loadInitialItems = function(type, args) {

	var start = args[0];
	var last = args[1]; 
	// fetch twice the number for caching. images are create once.
	makeRequest(this, 'getTrips.php', searchStr, start, (last-start+1) * 2);	
};

/**
 * Custom load next handler. Called when the carousel loads the next
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadNextHandler
 */
var loadNextItems = function(type, args) {	

	var start = args[0];
	var last = args[1];
	var alreadyCached = args[2];
	
	if(!alreadyCached) {
		makeRequest(this, 'getTrips.php', searchStr, start, (last-start+1) * 2);
	}

};

/**
 * Custom load previous handler. Called when the carousel loads the previous
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadPrevHandler
 */
var loadPrevItems = function(type, args) {
	var start = args[0];
	var last = args[1]; 
	var alreadyCached = args[2];

	if(!alreadyCached) {
		makeRequest(this, 'getTrips.php', searchStr, start, (last-start+1) * 2);
	}
};

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the previous button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: prevButtonStateHandler
 */
var handlePrevButtonState = function(type, args) {

	var enabling = args[0];
	var upImage = args[1];
	if(enabling) {
		upImage.src = "images/up-enabled.gif";
	} else {
		upImage.src = "images/up-disabled.gif";
	}
};

var showButtons = function(type, args) {
	YAHOO.util.Dom.setStyle("up-arrow", "visibility", "visible");
	YAHOO.util.Dom.setStyle("down-arrow", "visibility", "visible");
};


/**
 * You must create the carousel after the page is loaded since it is
 * dependent on an HTML element (in this case 'dhtml-carousel'.) See the
 * HTML code below.
 */
var carousel; // for ease of debugging; globals generally not a good idea
var searchStr = "Amsterdam";
var firstTimeThrough = true;
var pageLoad = function() 
{
	
	carousel = new YAHOO.extension.Carousel("dhtml-carousel", 
		{
			itemWidth:         81,
			itemHeight:        110,
			numVisible:        4,
			animationSpeed:    0.4,
			scrollInc:         3,
			loadInitHandler:   loadInitialItems,
			prevElement:       "up-arrow",
			nextElement:       "down-arrow",
			orientation:       "vertical",
			loadNextHandler:   loadNextItems,
			loadPrevHandler:   loadPrevItems,
			prevButtonStateHandler:   handlePrevButtonState
		}
	);

};

/**
 * Called via the YUI Connection manager (see makeRequest).
 */
var handleSuccess = function(callbackResponse)
{
	var start = callbackResponse.argument[0];
	var numResults = callbackResponse.argument[1];
	var carousel = callbackResponse.argument[2];
	
  	if(callbackResponse.responseText !== undefined) {
		var theTrip = eval( '(' + callbackResponse.responseText + ')' );
		for(var i=0; i< theTrip.ResultSet.totalResultsReturned; i++) {
			var result = theTrip.ResultSet.Result[i];
			var li = carousel.addItem(start+i, fmtTripInnerHTML(result));
		}
		showButtons();
	}
	
	if(firstTimeThrough) {
		firstTimeThrough = false;
		carousel.calculateSize();
	}
};

/**
 * Since carousel.addItem uses an HTML string to create the interface
 * for each carousel item, this method takes an individual trip plan
 * result and cobbles together HTML for the innerHTML argument.
 */
var fmtTripInnerHTML = function(result) {

  	var tripInnerHTML = 
  		'<a href="' + 
  		result.Url + 
  		'"><img src="' + 
  		result.Image.Url +
		'" width="' +
		75 +
		'" height="' +
		75+
		'"/>' + 
  		trunc(result.Title, 40, 20) + 
  		'<\/a>';
  
	return tripInnerHTML;
	
};

var handleFailure = function(o)
{
     var result = o.status + " " + o.statusText;
     alert("Transaction failed.  The error is: " + result);
};
  
/**
 * A utility function for invoking the YUI connection manager (Ajax)
 * with a URL that matches the Yahoo! developer network Trip Planner
 * APIs (see: http://developer.yahoo.com/travel/tripservice/V1/tripSearch.html)
 *
 * The callback object is the configuration object for the YUI Connection
 * manager. If this is successful, the 'handleSuccess' function is called.
 */
var makeRequest = function(carousel, url, query, start, numResults)
{
	var params = '?query=' + query + 
	                        '&start=' + start + 
	                        '&results=' + numResults; 
	
	var callback =
	{
  		success: handleSuccess,
  		failure: handleFailure,
  		argument: [start, numResults, carousel]
	};
	
	var sUrl = url + params; 
	YAHOO.util.Connect.asyncRequest("GET", sUrl, callback, null);
};

/**
 * Just a utility function for cleaning up the returned HTML response
 * and truncating it.
 */
var trunc = function(str, maxLen, maxWordLen) 
{
	// Strip markup
    str = str.replace("<b>", "");
    str = str.replace("<\/b>", "");
    str = str.replace("<B>", "");
    str = str.replace("<\/B>", "");
    
    // Simple truncation
	if(str.length > maxLen) {
		str = str.substring(0,maxLen) + "...";
	}

	// Truncate for long words
	var start = 0;
	var loopCnt = 0;
	var strSlice = str;
	
	do  {
		var spaceBreak = strSlice.indexOf(' ');
		var lenOfWord = spaceBreak;
		if(lenOfWord == -1)
		{
			lenOfWord = strSlice.length;
		}

		if (lenOfWord > maxWordLen) {
			//debugMsg("Long word found in: " + strSlice);
			str = str.substring(0, maxWordLen);  // TRUNCATE
		}
		start = spaceBreak+1;
		strSlice = strSlice.substring(start);
		spaceBreak = strSlice.indexOf(' ');
	} while(spaceBreak != -1)
	
	
	return str;
};

var searchTrips = function(e) {
	searchStr = YAHOO.util.Dom.get("search-string").value;
	carousel.reload(6);
};

YAHOO.util.Event.addListener(window, 'load', pageLoad);
YAHOO.util.Event.addListener("search-button", 'click', searchTrips);

</script>

</head>

<body>
<div id="doc" class="yui-t7">
   <div id="hd">
      <h1>Ajax Search - Carousel</h1>
   </div>
<div id="bd">
<p>The Yahoo! Trip Planner API is searched for results matching the input search terms. This illustrates the reload() capability of the carousel. Also illustrates the  resize capability by passing a numVisible to reload(). Initially 4 items are show. After search 6 items are shown. The reload looks like this:</p>
<pre>
	reload(6);
</pre>

<div style="clear:both;" class="input-line">
	<p>Find trips: </p>
	<input id="search-string" style="width:100px;" type="text" value="Amsterdam"/>
	<button id="search-button">Search</button>
</div>

<!-- Carousel Structure -->
<div style="clear:both;margin:0px;">
	<img id="up-arrow" class="left-button-image" src="images/up-enabled.gif" alt="Previous Button"/>
</div>

<div id="dhtml-carousel" class="carousel-component">
	<div class="carousel-clip-region">
		<ul class="carousel-list">
			<!-- Filled in via the loadInitHandler, loadNextHandler, and loadPrevHandler
			<li id="item-1">
			<a href="#">
				<img src="http://static.flickr.com/74/162582364_7fc3e2d60d_s.jpg"/>
			</a>Number One</li>
			-->
		</ul>
	</div>
</div>

<div>
	<img id="down-arrow" class="right-button-image" src="images/down-enabled.gif" alt="Next Button"/>
</div>

<div style="padding-top:20px;clear:both">View the <a href="source.php?url=carousel_ajax_search_vert.html">source</a>&nbsp;or&nbsp;<a href="index.html">documentation</a>&nbsp;or&nbsp;<a href="source.php?url=getTrips.php">PHP returning JSON Trip Data (getTrips.php)</a></div>

</div>
</div> 
</body>
</html>